<template>
    <div class="message-box">
        <Transition name="down">
            <div class="message" :style="style[type]" v-show="isShow">
                <!-- 上面绑定的是样式 -->
                <!-- 不同提示图标会变 -->
                <i class="iconfont" :class="[style[type]?.icon]"></i>
                <span class="text">{{ text }}</span>
            </div>
        </Transition>
    </div>
</template>
<script setup>
import {onMounted, ref} from 'vue';
const props = defineProps({
    text: {
        type: String,
        default: '',
        required: true
    },
    type: {
        type: String,
        // warn 警告  error 错误  success 成功
        default: 'info'
    }
});
const style = {
    info: {
        icon: 'icon-tishi',
        color: '#FF9201'
    },
    error: {
        // icon: 'icon-guanbi1',
        // color: '#FF4719'
        icon: 'icon-tishi',
        color: '#FF9201'
    },
    success: {
        icon: 'icon-dui1',
        color: '#00B042'
    }
};
// 控制动画
const isShow = ref(false);
// 组件模板渲染成功后触发
onMounted(() => {
    isShow.value = true;
});
</script>
<style scoped lang="scss">
.down {
    &-enter {
        &-from {
            transform: translate3d(0, -75px, 0);
            opacity: 0;
        }
        &-active {
            transition: all 0.5s;
        }
        &-to {
            transform: none;
            opacity: 1;
        }
    }
}
.message-box {
    position: fixed;
    top: 25px;
    background-color: transparent;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 99999;
}
.message {
    display: flex;
    justify-content: center;
    z-index: 9999;

    padding: 16px 20px 14px;
    background-color: #fff;
    color: #222222;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    min-width: 108px;
    display: flex;
    justify-content: center;
    align-items: center;

    i {
        margin-right: 5px;
        vertical-align: middle;
    }
    .text {
        vertical-align: middle;
        color: #222;
    }
}
.iconfont {
    font-size: 20px;
}
</style>